<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar>
        <ion-buttons slot="start" style="margin-top: 10px">
          <ion-back-button color="light" text=""></ion-back-button>
        </ion-buttons>
        <ion-buttons slot="end" style="margin-top: 10px;width: 150px">
          <ion-row style="width: 100%">
            <ion-col class="d-f ion-align-items-center">
              <img src="../../public/assets/images/7.svg" style="width: 25px;height: 25px;"/>
              <span style="font-size: smaller;margin-left: 7px;color: white">收藏</span>
            </ion-col>
            <ion-col class="d-f ion-align-items-center">
              <img src="../../public/assets/images/8.svg" style="width: 25px;height: 25px;"/>
              <span style="font-size: smaller;margin-left: 7px;color: white">推荐</span>
            </ion-col>
          </ion-row>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-row class="ion-padding">
        <ion-col class="d-f">
          <img src="../../public/assets/images/1.jpg" style="width: 80px;height: 100px;"/>
          <div class="d-f f-d-c ion-justify-content-between ion-margin-start">
            <div style="font-size: larger;color: white">零基础学java</div>
            <div class="div3" style="font-size: small;color: white">共364页</div>
            <div class="div3" style="font-size: small;color: white">明日科技</div>
          </div>
        </ion-col>
      </ion-row>

      <ion-card>
        <ion-card-header>
          <ion-row style="font-size: small">
            <ion-col class="ion-align-items-center d-f f-d-c">
              <div><span style="font-size: x-large;font-weight: bolder">9.3</span>分</div>
              <div class="d-f ion-justify-content-center" style="margin-top: 7px;">
                <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
              </div>
            </ion-col>
            <ion-col class="ion-align-items-center d-f f-d-c">
              <div><span style="font-size: x-large;font-weight: bolder">56</span>次</div>
              <span style="margin-top: 7px;">本周借阅</span>
            </ion-col>
            <ion-col class="ion-align-items-center d-f f-d-c">
              <div><span style="font-size: x-large;font-weight: bolder">1659</span>次</div>
              <span style="margin-top: 7px;">借阅总数</span>
            </ion-col>
          </ion-row>
        </ion-card-header>
        <ion-card-content>
          <ion-list-header style="font-size: medium">书籍简介</ion-list-header>
          <p style="margin-left: 16px;padding-top: 7px;line-height:30px;">
            《零基础学Java》从零基础学习者的角度出发，通过通俗易懂的语言、流行有趣的实例，详细地介绍了使用Java语言进行程序开发需要掌握的知识和技术。
          </p>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header class="d-f ion-align-items-center ion-justify-content-between">
          <span style="font-size: large;font-weight: bolder">书友热评</span>
          <span class="d-f ion-align-items-center" style="font-size: small" @click="() => router.push('/tabs/comment')">
            <span>更多(1265条)</span>
            <img :src="require('../../public/assets/images/9.svg')" style="width: 15px;height: 15px;"/>
          </span>
        </ion-card-header>
        <ion-card-content>
          <ion-row>
            <ion-col class="d-f">
              <div style="margin-right: 7px;min-width: 35px">
                <img src="../../public/assets/images/14.jpg" style="width: 30px;height: 30px;border-radius: 50px"/>
              </div>
              <div class="d-f f-d-c ion-align-items-start ion-justify-content-between">
                <span>强明</span>
                <div class="d-f ion-justify-content-center" style="margin-top: 7px;">
                  <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                  <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                  <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                  <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                  <img :src="require('../../public/assets/images/10.svg')" style="width: 15px;height: 15px;"/>
                </div>
                <p style="line-height: 25px;margin-top: 7px">
                  非常好的适合java初学者的书。
                </p>
              </div>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="d-f">
              <div style="margin-right: 7px;min-width: 35px">
                <img src="../../public/assets/images/15.jpg" style="width: 30px;height: 30px;border-radius: 50px"/>
              </div>
              <div class="d-f f-d-c ion-align-items-start ion-justify-content-between">
                <span>唐门三姐</span>
                <div class="d-f ion-justify-content-center" style="margin-top: 7px;">
                  <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                  <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                  <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                  <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                  <img :src="require('../../public/assets/images/6.svg')" style="width: 15px;height: 15px;"/>
                </div>
                <p style="line-height: 25px;margin-top: 7px">
                  很不错的一本书，图文并茂，值得推荐，很适合java初学者和有一定编程经验的人。
                </p>
              </div>
            </ion-col>
          </ion-row>
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonInput,
  IonPage,
  IonCard,
  IonItem,
  IonIcon,
  IonButton,
  IonCardContent,
  IonContent,
  IonSearchbar,
  IonCardHeader,
  IonRow,
  IonCol,
  IonSegment,
  IonSegmentButton,
  IonLabel,
  IonAvatar,
  IonImg,
  IonBackButton,
  IonButtons,
  IonListHeader,
  IonChip
} from '@ionic/vue';
import {callOutline, reorderFourOutline, lockClosedOutline, personOutline} from 'ionicons/icons';
export default defineComponent({
  name: 'BookPage',
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonInput,
    IonPage,
    IonCard,
    IonItem,
    IonIcon,
    IonButton,
    IonCardContent,
    IonContent,
    IonSearchbar,
    IonCardHeader,
    IonRow,
    IonCol,
    IonSegment,
    IonSegmentButton,
    IonLabel,
    IonAvatar,
    IonImg,
    IonBackButton,
    IonButtons,
    IonListHeader,
    IonChip,
  },
  setup() {
    const router = useRouter();
    return {
      lockClosedOutline,
      callOutline,
      reorderFourOutline,
      router
    }
  }
});
</script>

<style lang="less" scoped>
ion-content,ion-toolbar{
  --background: #b4c1a8;
}
</style>
